import { defineComponent, reactive } from "vue";
import { loadingBox, progressBox, progress, bar, title, loadingBoxM } from './Loading.module.scss';
import { libraryState } from "@/utils/library";
export const loadrObj = reactive({
    isShow: true,
    loadingProgress: 0
})
export default defineComponent({
    name: 'Loading',
    data() {
        return {

        }
    },
    mounted() {
    },
    methods: {
    },
    render() {
        const { isShow, loadingProgress } = loadrObj;
        return <div class={`${loadingBox} ${libraryState.isMobile && loadingBoxM}`} style={{ display: `${isShow ? 'flex' : 'none'}` }}>
            <div class={progressBox}>
                <div class={progress}>
                    <div class={bar} style={{ width: `${loadingProgress}%` }} ></div>
                </div>
                <div class={title}>Loading...</div>
            </div>
        </div>;
    },
});